<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖2</title>
</head>
<body>
    <p >
        抽奖的人:<span id="all"></span>
    </p>
    <h1>
        获奖者:<span id="one"></span>
    </h1>
    <button onclick="show()">开始抽奖</button>
    <button onclick="stopShow()">停止抽奖</button>
</body>
<script>
    const all = [
        {name:'jack',count:0},
        {name:'tom',count:0},
        {name:'mike',count:0},
        {name:'peter',count:0},
        {name:'rose',count:0}];

    function showall(){
        let str = ""
        for (let i = 0; i < all.length; i++) {
            str += all[i].name+":"+all[i].count+","
        }
        document.getElementById("all").innerText = str
    }

    //中奖的坐标
    let i = -1;
    let timer = null;

    function show(){
        timer = setInterval(function (){
            i = Math.floor(Math.random()*all.length)
            const stu = all[i]
            // console.log(stu)
            document.getElementById("one").innerText = stu.name
        },100)
    }

    function stopShow(){
        // all[0].count++;
        clearInterval(timer)
        timer = null;
        const stu = all[i]
        stu.count++;
        showall()
    }
    showall()

</script>
</html>